<template>
    <div>
        <div class="bigbox" v-for="item in goods" :key="item.cate_info.cate_name">
            <p class="nav1">
                <span>
                    <img :src="item.cate_info.cate_image" alt="">
                    <i>{{item.cate_info.cate_name}}</i>
                </span>
                <span>更多></span>
            </p>
            <ul class="goods-main">
                <li v-for="data in item.goods_list" :key="data.goods_commonid">
                    <div class="goods-img">
                        <img :src="data.goods_image" alt="">
                    </div>
                    <div class="box">
                        <div class="Introduction">{{data.goods_name}}</div>
                        <div class="bottom">
                            <span class="price">{{data.goods_price}}元</span>
                            <span class="number">已售{{data.goods_salenum}}件</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="bigbox">
            <p class="nav1 hotbox">
                <span>
                    <i class="hot">热门推荐</i>
                </span>
                <span class="more">更多></span>
            </p>
            <ul class="goods-main">
                <li v-for="(item,index) in recommend" :key="index">
                    <div class="goods-img">
                        <img :src="item.goods_image" alt="">
                    </div>
                    <div class="box">
                        <div class="Introduction">{{item.goods_name}}</div>
                        <div class="bottom">
                            <span class="price">{{item.goods_price}}元</span>
                            <span class="number">已售{{item.goods_salenum}}件</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
  props: ['goods', 'recommend']
}
</script>>
<style lang="scss" scoped>
    .bigbox{
        padding-left: 5px;
        padding-right: 5px;
    }
    .hotbox{
        height:30px;
        background:red;
        .hot{
            color:#fff;
        }
        .more{
            color:#fff;
        }
    }
    .nav1{
        display: flex;
        justify-content: space-between;
        height: 30px;
        align-items: center;
        font-size: 15px;
        color: rgb(122, 122, 122);
        span{
            height: 100%;
            line-height: 30px;
            img{
                margin-top: 7.5px;
                height: 15px;
                margin-right: 5px;
                margin-left: 3px;
            }
        }
    }
    .goods-main{
        display: flex;
        background: #fff;
        flex-wrap:wrap;
        li{
            height: 250px;
            width: 50%;
            border: 1px solid #ccc;
            box-sizing: border-box;
            flex-wrap: wrap;
            .box{
                padding-left: 5px;
                padding-right: 5px;
                margin-top: 3px;
                .bottom{
                    margin-top: 3px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .price{
                        font-size: 15px;
                        color: red;
                    }
                    .number{
                        font-size: 13px;
                        color: #ccc;
                    }
                }

            }
            .goods-img{
                width: 100%;
                height: 180px;
                // background: red;
                padding:10px;
                box-sizing: border-box;
                img{
                    width: 100%;
                }
            }
            .Introduction{
                width: 100%;
                font-size: 15px;
                line-height: 18px;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                display: -webkit-box;

            }
        }
    }
</style>
